import React, {useState, useContext, createContext} from "react";
import {Card} from 'antd'

// 创建 Context
const MyContext = createContext()

/**
 *   普通写法
 * **/
const BasicComponents = {
    B: function ({count, setCount}) {
        const handelAdd = () => {
            setCount(pre => pre + 1)
        }
        return (<div>
                <h4> Basic孙子组件B的count值为:{count}</h4>
                <button onClick={handelAdd}>点击+1</button>
            </div>

        )
    }, A: function ({count, setCount}) {
        return (<div>
            <h4> Basic 子组件A的count值为:{count}</h4>
            <BasicComponents.B count={count} setCount={setCount}/>
        </div>)
    },
}

const ContextComponents = {
    B: function () {
        const {count, setCount} = useContext(MyContext)
        const handelAdd = () => {
            setCount(pre => pre + 1)
        }
        return (<div>
                <h4> Context 孙子组件B的count值为:{count}</h4>
                <button onClick={handelAdd}>点击+1</button>
            </div>

        )
    },
    A: function () {
        const {count} = useContext(MyContext)
        return (<div>
            <h4>  Context 子组件A的count值为:{count}</h4>
            <ContextComponents.B/>
        </div>)
    },
}

export default () => {
    const [count, setCount] = useState(0)

    return (
        <Card hoverable>
            <div style={{display: 'flex', flexDirection: "column", gap: 10}}>
                <h1>useContext 的使用:</h1>
                <div
                    className={'definition'}>useContext是React的一个Hook,它允许你在组件树中跨多层级访问context的值，而无需通过每层手动传递props。
                </div>

                <div>
                    <div>普通写法</div>
                    <h3>根组件的count值为:{count}</h3>
                    <BasicComponents.A count={count} setCount={setCount}/>
                </div>

                {
                    /**
                     *   使用  useContext
                     *   1. 引入  import React, { useContext, createContext} from "react";
                     *   2. 使用  createContext  方法 创建上下文对象  MyContext    注:需要定义在全局
                     *   3. 使用 <MyContext.Provider>  将 需要使用数据的组件  根组件 包裹  使用
                     *   4. 在 <MyContext.Provider> 添加value 属性  传入对象或者数组(一般习惯使用对象)  对象里为需要传递的参数 或者方法
                     * **/
                }
                <div style={{marginTop: 20}}>
                    <MyContext.Provider value={{count: count, setCount: setCount}}>
                        <div>使用 useContext:</div>
                        <h3>根组件的count值为:{count}</h3>
                        <ContextComponents.A/>
                    </MyContext.Provider>

                </div>

            </div>

        </Card>


    )
}